<template>
  <div>
    <table
      border="1"
      width="700"
      style="border-collapse: collapse"
    >
      <caption>
        购物车
      </caption>
      <thead>
        <tr>
          <th>
            <input type="checkbox" v-model="isAll"/> <span>全选</span>
          </th>
          <th>名称</th>
          <th>价格</th>
          <th>数量</th>
          <th>总价</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <!-- DOM模板限制，tbody必须是tr标签，所以使用组件就得用is属性执行组建名字 -->
       <tr is='MyTr' v-for="(obj,index) in goodList" :key="index" :obj='obj' :index='index' @sub='subFn'></tr> 
      </tbody>
      <tfoot>
        <tr>
          <td>合计:</td>
          <td colspan="5">
            {{allPrice}}
          </td>
        </tr>
      </tfoot>
    </table>
  </div>
</template>

<script>
import MyTr from './components/Mytr'
export default {
  data() {
    return {
      goodList: [
        {
          name: "诸葛亮",
          price: 1000,
          num: 1,
          checked: false,
        },
        {
          name: "蔡文姬",
          price: 1500,
          num: 1,
          checked: false,
        },
        {
          name: "妲己",
          price: 2000,
          num: 1,
          checked: false,
        },
        {
          name: "鲁班",
          price: 2200,
          num: 1,
          checked: false,
        },
      ],
    };
  },
  computed: {
      isAll:{
          set(val){//页面点击复选框，会把选中状态true/false赋予给v-module的变量
            this.goodList.forEach(obj => obj.checked = val)
          },
          get(){
            return this.goodList.every(obj => obj.checked == true)  
          }
      },
      allPrice(){
          return this.goodList.reduce((sum,obj)=>{

             if (obj.checked === true) {
                 sum += obj.num * obj.price
             }
            return sum
          } ,0)
  },
  
 
},
 methods: {
      subFn(index){
          this.goodList.splice(index,1)
      }
  },
components: {
     MyTr
  },
}

</script>

<style>
</style>